<template>
    <div class="view-image-switch">
        <template>
            <img :style="[filterClass]" :src="imageURL" @dragstart.prevent @dragover.prevent @drop.prevent />
        </template>
        <svg id="svg">
            <defs>
                <filter :id="detail.identifier + '_svg'">
                    <feColorMatrix color-interpolation-filters="sRGB" type="matrix" :values="this.hexTofeColorMatrix(detail.style.foreColor)" />
                </filter>
            </defs>
        </svg>
        <div v-show="false">{{ dataInit }}{{ colorInit }}{{ deviceStatusInit }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

import BaseView from './View';
import topoUtil from '@/utils/topo/topo-util';
import { getDeviceStatus } from '@/api/scada/topo';
import switchImage from '@/assets/topo-img/base/switch.png';

export default {
    name: 'viewImageSwitch',
    extends: BaseView,
    computed: {
        ...mapState({
            mqttData: (state) => state.topoEditor.mqttData,
            deviceStatus: (state) => state.topoEditor.deviceStatus,
        }),
        colorInit() {
            if (this.detail.style.foreColor && this.detail.style.isFilter) {
                this.filterClass.marginLeft = '';
                this.filterClass.filter = 'url(#' + this.detail.identifier + '_svg)';
                this.animationClass = {};
            } else if (this.detail.style.foreColor && this.detail.style.isFilter == false) {
                this.filterClass.marginLeft = '-10000px';
                this.filterClass.filter = 'drop-shadow(5000px 0px ' + this.detail.style.foreColor + ')';
                this.animationClass = {
                    overflow: 'hidden',
                    position: 'relative',
                };
            } else {
                this.animationClass = {};
                this.filterClass.marginLeft = '';
                this.filterClass.filter = '';
            }
            return this.detail.style.foreColor;
        },
        dataInit: function () {
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                let mqttNum = this.mqttData.serialNumber;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if (this.detail.dataBind.variableType && this.detail.dataBind.variableType !== 1) {
                        bindNum = this.detail.dataBind.sceneModelDeviceId;
                        mqttNum = this.mqttData.sceneModelDeviceId;
                    }
                }
                if (bindNum && bindNum === mqttNum && this.detail.dataBind.identifier && this.detail.dataBind.activeName == '变量状态') {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataBind.identifier == this.mqttData.message[i].id) {
                            let val = this.mqttData.message[i].value || 0;
                            this.setSwitchStatus(val);
                        }
                    }
                }
            }
        },
        deviceStatusInit() {
            if (Object.keys(this.deviceStatus).length !== 0) {
                const { serialNumber: mqttNum, status } = this.deviceStatus;
                let { serialNumber: bindNum } = this.detail.dataBind;
                const type = Number(this.$route.query.type);
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                if (mqttNum === bindNum) {
                    this.setOnlineStatus(status);
                }
            }
        },
    },
    data() {
        return {
            filterClass: {
                width: '100%',
                height: '100%',
                filter: '',
                position: 'absolute',
                animation: this.detail.hdClassName + ' 5s infinite',
            },
            defaultColor: this.detail.style.foreColor,
            imageURL: switchImage,
        };
    },
    mounted() {
        if (!this.editMode) {
            const { activeName, modelValue } = this.detail.dataBind;
            if (activeName === '设备状态') {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                this.getDeviceRealStatus(bindNum);
            } else {
                const val = modelValue || 0;
                this.setSwitchStatus(val);
            }
        }
    },
    methods: {
        getDeviceRealStatus(serialNumber) {
            const params = {
                serialNumber: serialNumber,
            };
            getDeviceStatus(params).then((res) => {
                if (res.code == 200) {
                    let status = res.data;
                    this.setOnlineStatus(status);
                }
            });
        },
        hexTofeColorMatrix(hex) {
            if (!hex) {
                hex = '0000';
            }
            hex = hex.replace('#', '');
            let RGB = [];
            let numberList = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
            for (let i = 0; i < hex.length; i += 2) {
                const firstDigit = parseInt(hex[i], 16);
                const firstDigitPartial = firstDigit * 16;
                let RGBValue = parseInt(hex[i + 1], 16) + firstDigitPartial;
                RGBValue = RGBValue / 255;
                RGBValue = RGBValue.toFixed(2);
                RGB.push(RGBValue);
            }
            const red = RGB[0];
            const green = RGB[1];
            const blue = RGB[2];
            numberList[0] = red;
            numberList[6] = green;
            numberList[12] = blue;
            return numberList.join(' ');
        },
        // 设置按钮切换状态
        setSwitchStatus(val) {
            const { stateList } = this.detail.dataBind || {};
            if (stateList && stateList.length !== 0) {
                const stateItem = stateList.find((item) => topoUtil.judgeSize(item.paramCondition, val, item.paramData));
                if (stateItem) {
                    this.detail.style.foreColor = stateItem.foreColor || null;
                    this.imageURL = stateItem.imageUrl || null;
                } else {
                    this.detail.style.foreColor = this.defaultColor;
                    this.imageURL = switchImage;
                }
            }
            const { controValue } = this.detail.dataEvent || {};
            if (controValue == '0开1关') {
                if (val == 1) {
                    this.detail.dataAction.actualValue = '关';
                } else {
                    this.detail.dataAction.actualValue = '开';
                }
            } else if (controValue == '0关1开') {
                if (val == 0) {
                    this.detail.dataAction.actualValue = '关';
                } else {
                    this.detail.dataAction.actualValue = '开';
                }
            }
        },
        // 设置按钮在线/离线/禁用状态
        setOnlineStatus(status) {
            let { openImageUrl, warnImageUrl, shutImageUrl } = this.detail.dataBind;
            if (status === 3 && openImageUrl) {
                this.imageURL = openImageUrl;
            } else if (status === 2 && warnImageUrl) {
                this.imageURL = warnImageUrl;
            } else if (status === 4 && shutImageUrl) {
                this.imageURL = shutImageUrl;
            } else {
                this.imageURL = switchImage;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.view-image-switch {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
